
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
        @selection-change="selectionChange"
      >
        <template
          slot="cleanTime"
          slot-scope="scope"
        >
          {{scope.row.beginTime}} ~ {{scope.row.endTime}}
        </template>
        <template slot="menuRight">
          <el-button
            v-if="permissionList.autoClean"
            type="primary"
            size="small"
            @click="dialogVisible = true"
          >系统自动清分</el-button>
          <el-button
            v-if="permissionList.reClean"
            type="primary"
            size="small"
            @click="handleReClean"
          >重新清分</el-button>
        </template>>
      </avue-crud>
    </basic-container>
    <el-dialog
      title="系统自动清分"
      width="500px"
      :visible.sync="dialogVisible"
    >
      <avue-form
        ref="form"
        v-model="autoCleanForm"
        :option="option"
        @submit="submit"
      >
      </avue-form>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, autoClean, reClean } from '@/api/rca/swckclearotheraccount'
import { tableOption } from '@/const/crud/rca/swckclearotheraccount'
import { mapGetters } from 'vuex'
import { dateFormat } from '@/util/date';

export default {
  name: 'swckclearotheraccount',
  data () {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption:tableOption,
      selection: [],
      dialogVisible: false,
      autoCleanForm: {}
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList () {
      return {
        autoClean: this.vaildData(this.permissions.sw_ck_clear_other_account_autoClean, false),
        reClean: this.vaildData(this.permissions.sw_ck_clear_other_account_reClean, false)
      };
    },
    option () {
      return {
        submitText: '确认',
        column: [{
          label: "清分开始时间",
          prop: "startDate",
          type: "date",
          span: 24,
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          labelWidth: 120,
          placeholder: "请选择清分开始时间",
          rules: [{
            required: true,
            message: "请选择清分开始时间",
            trigger: "change"
          }],
          pickerOptions: {
            disabledDate: (time) => {
              return time.getTime() > Date.now() || (this.autoCleanForm.startDate && time.getTime() > new Date(this.autoCleanForm.startDate).getTime());
            },
          }
        }, {
          label: "清分结束时间",
          prop: "endDate",
          type: "date",
          span: 24,
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          labelWidth: 120,
          placeholder: "请选择清分结束时间",
          rules: [{
            required: true,
            message: "请选择清分结束时间",
            trigger: "change"
          }],
          pickerOptions: {
            disabledDate: (time) => {
              return time.getTime() > Date.now() || (this.autoCleanForm.startDate && time.getTime() < new Date(this.autoCleanForm.startDate).getTime());
            },
          }
        }]
      }
    }
  },
  methods: {
    async submit (params, done) {
      await autoClean(params);
      this.$message.success('操作成功');
      done()
    },
    selectionChange (list) {
      this.selection = list.map(l => l.id);
    },
    handleReClean () {
      if (this.selection.length === 0) {
        this.$message.error('请选择要重新清分的记录');
        return;
      }
      // TODO
      reClean({
        ids: this.selection,
      }).then(data => {
        this.$message.success('操作成功')
        this.getList(this.page)
      })
    },
    async getList (page, params) {
      this.tableLoading = true
      const [startDate, endDate] = this.searchForm.cleanTime || [];
      try {
        const response = await fetchList(Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm,
          { startDate, endDate }
        ))

        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      } catch (e) {
        this.tableLoading = false
      }
    },
    async searchChange (form, done) {
      this.searchForm = { ...form };
      try {
        await this.getList(this.page, form);
      } finally {
        done();
      }
    },
    refreshChange () {
      this.getList(this.page)
    },
    searchReset () {

      this.page.currentPage = 1
      this.getList(this.page);
    },
  }
}
</script>
